<template>
  <view class="container">
    <!-- 顶部标题栏 - 移除返回按钮 -->
    <view class="header">
      <view class="page-title">个人中心</view>
    </view>
    
    <!-- 用户基本信息 -->
    <view class="user-profile">
      <view class="profile-avatar">{{ userInitial }}</view>
      <view class="profile-name">{{ userInfo?.name || '用户' }}</view>
      <view class="profile-email">{{ userInfo?.email || userInfo?.username || '' }}</view>
    </view>
    
    <!-- 功能菜单 - 移除了不需要的功能项 -->
    <view class="card">
      <view class="menu-item" @click="navigateToPage('help')">
        <view class="menu-icon">❓</view>
        <view>帮助与反馈</view>
      </view>
      <view class="menu-item" @click="logout">
        <view class="menu-icon">🚪</view>
        <view>退出登录</view>
      </view>
    </view>
    
    <!-- 版本信息 -->
    <view class="version-info">
      <text>版本 1.0.0</text>
      <view class="about-text">足球预测 - 专业赛事分析平台</view>
      <view class="about-text">© 2025 荣辉数据科技有限公司</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
      token: ''
    }
  },
  computed: {
    userInitial() {
      return this.userInfo?.name?.substring(0, 1).toUpperCase() || 'U';
    }
  },
  onShow() {
    // 每次显示页面时检查登录状态，确保数据是最新的
    this.checkLoginStatus();
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      const userInfo = uni.getStorageSync('userInfo');
      
      if (!token || !userInfo) {
        // 未登录，跳转到登录页
        uni.redirectTo({
          url: '/pages/login/login'
        });
        return;
      }
      
      // 已登录，保存用户信息
      this.token = token;
      this.userInfo = userInfo;
      
      console.log('当前登录用户:', this.userInfo);
    },
    
    navigateToPage(page) {
      // 这里可以实现跳转到对应功能页面的逻辑
      uni.showToast({
        title: `导航到${page}页面`,
        icon: 'none'
      });
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除登录信息
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
            
            // 延迟跳转到登录页
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/login/login'
              });
            }, 1500);
          }
        }
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: $spacing-lg;
  max-width: 960rpx;
  margin: 0 auto;
}

/* 顶部标题栏 */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-base 0;
  margin-bottom: $spacing-lg;
}

.page-title {
  font-size: $font-size-lg;
  font-weight: 600;
}

/* 用户资料部分 */
.user-profile {
  text-align: center;
  padding: $spacing-xl 0;
}

.profile-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: $avatar-radius;
  background-color: $primary;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $light;
  font-size: $font-size-xxl;
  font-weight: bold;
  margin: 0 auto $spacing-base;
}

.profile-name {
  font-size: $font-size-xl;
  font-weight: 600;
  margin-bottom: $spacing-xs;
}

.profile-email {
  color: $text-color-secondary;
  font-size: $font-size-sm;
  margin-bottom: $spacing-lg;
}

/* 菜单项样式 */
.menu-item {
  display: flex;
  align-items: center;
  padding: $spacing-base 0;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  background-color: rgba(58, 134, 255, 0.1);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
  color: $primary;
  font-size: $font-size-base;
}

/* 版本信息 */
.version-info {
  text-align: center;
  margin-top: $spacing-xl;
  color: $text-color-secondary;
  font-size: $font-size-xs;
}

.about-text {
  margin-top: $spacing-xs;
  font-size: $font-size-xs;
  color: $text-color-secondary;
  opacity: 0.8;
}
</style> 